<template>
  <view>
    <uni-nav-bar dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF" status-bar title="DDC"
      left-icon="left" @clickLeft="back"/>
    <view class="differential">
      <view class="differ_text">
        您的DDC
      </view>
      <view class="differ_num">
        {{balance}}
      </view>
    </view>
    <view class="differ_title">
      DDC记录
    </view>
    <view class="differ_box" v-for="(item,index) in list" :key="index">
      <view class="differ_box_title">
        {{item.message}}
      </view>
      <view class="differ_box_time">
        {{item.time}}
      </view>
      <view class="differ_box_plus">
        {{item.num}}
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getCoinIndex
  } from '@/api/index.js'
  export default {
    data() {
      return {
        img: '../../static/differential/lottery_bg.png',
        page: 1,
        acIndex: 212,
        list: [],
        balance: ''
      }
    },
    onLoad() {
      this.get_info()
    },
    onReachBottom() {
      this.page++
      this.get_info()
    },
    methods: {
      back() {
        uni.navigateBack()
      },
      clickRights() {
        this.$ui.push('/pages/differential/giving')
        console.log('微分赠送');
      },
      get_info() {
        const vm = this
        getCoinIndex({
          page: vm.page,
          status: vm.acIndex
        }).then(res => {
          vm.loading = false
          if (res.code === 1) {
            vm.balance = res.data.coin
            const _list = res.data.list
            vm.list = [...vm.list, ..._list]
            if (vm.page < res.data.pages) {
              vm.page++
            } else {
              vm.finished = true
            }
          } else {
            vm.error = true
          }
        }, () => {
          vm.loading = false
          vm.error = true
        })
      }
    }
  }
</script>

<style lang="less">
  .differential {
    position: relative;
    margin: 35rpx auto 40rpx;
    width: 608rpx;
    height: 289rpx;
    background-image: url(@/static/differential/lottery_bg.png);
    background-size: 100% 100%;

    .differ_text {
      position: absolute;
      top: 101rpx;
      width: 100%;
      font-size: 28rpx;
      line-height: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      text-align: center;
    }

    .differ_num {
      position: absolute;
      top: 157rpx;
      width: 100%;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #FFD76B;
      text-align: center;
    }
  }

  .differ_title {
    position: relative;
    top: 0;
    left: 72rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #333333;
  }

  .differ_box {
    position: relative;
    padding: 28rpx 29rpx 28rpx 26rpx;
    margin: 20rpx auto;
    width: 609rpx;
    height: 124rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    box-sizing: border-box;

    .differ_box_title {
      font-size: 25rpx;
      line-height: 25rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #666666;
    }

    .differ_box_time {
      position: absolute;
      top: 80rpx;
      font-size: 20rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
    }

    .differ_box_plus {
      position: absolute;
      top: 50%;
      right: 29rpx;
      transform: translateY(-50%);
      font-size: 34rpx;
      font-weight: bold;
      color: #ECD489;
    }

    .differ_box_plus1 {
      position: absolute;
      top: 50%;
      right: 29rpx;
      transform: translateY(-50%);
      font-size: 34rpx;
      font-weight: bold;
      color: #DA5959;
    }
  }
</style>
